<title>Entity</title> <!-- TODO: use JS to change the title -->
<link rel="stylesheet" href="/resources/css/entity.css">

<!-- Page header -->
<div class="page-header d-print-none">
	<div class="container-xl">

		<div class="row align-items-center">
			<div class="page-pretitle mb-2">
				Entity
			</div>
			<div class="col-auto me-2" id="picture">
				<!-- avatar -->
			</div>
			<div class="col">
				<span id="entity-id">
					<!-- id -->
				</span>
				<h1 class="page-title my-2" id="name">
					<!-- name -->
				</h1>
				<div class="row summary-row">
					<div class="col-auto me-2 d-flex align-items-center justify-content-center" id="entity-type">
						<!-- type -->
					</div>
					
					<div class="col-auto" id="num-items">
						<!-- no. items -->
					</div>
				</div>
			</div>
			<!-- Page title actions -->
			<div class="col-auto ms-auto d-print-none">
				<div class="btn-list">
					<a id="merge-entity" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-merge-entity">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
							fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
							stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-users">
							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
							<path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
							<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
							<path d="M16 3.13a4 4 0 0 1 0 7.75" />
							<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
						</svg>
						Merge Entity
					</a>
				</div>
			</div>
		</div>
	</div>
</div>



<!-- Page body -->
<div class="page-body">
	<div class="container-xl">
		<ul class="nav nav-bordered mb-4">
			<li class="nav-item">
				<a class="nav-link" aria-current="page" href="#">Overview</a>
			</li>
			<li class="nav-item">
				<a class="nav-link active" aria-current="page" href="#">Attributes</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Items</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Map</a>
			</li>
		</ul>


		<div class="row row-cards g-4">
			<div class="col-md-3" id="attribute-groups">

			</div>
			<div class="col-md-9">
				<div class="row row-cards">
					
					<div class="card">
						<div class="card-header">
						<h3 class="card-title">Basic profile</h3>
						</div>
						<div class="card-body">
							<div class="datagrid">
								<div class="datagrid-item">
									<div class="datagrid-title">Birth date</div>
									<div class="datagrid-content" id="birth-date">&mdash;</div>
								</div>
								<div class="datagrid-item">
									<div class="datagrid-title">Birth place</div>
									<div class="datagrid-content" id="birth-place">&mdash;</div>
								</div>
								<div class="datagrid-item">
									<div class="datagrid-title">Gender</div>
									<div class="datagrid-content" id="gender">&mdash;</div>
								</div>
								<div class="datagrid-item">
									<div class="datagrid-title">Websites</div>
									<div class="datagrid-content" id="websites">&mdash;</div>
								</div>
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-body">
							<div id="chart" style="height: 500px;"></div>
						</div>
					</div>
				
				</div>

			</div>
		</div>
	</div>
</div>


<template id="tpl-attribute-label">
	<label class="form-check">
		<input type="checkbox" class="form-check-input" checked>
		<span class="form-check-label"></span>
	</label>
</template>